<template>
  <div class="login-box">
    <div class="login-inner">
      <h3>超级登录</h3>
      <el-form
        :model="loginForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        size="mini"
      >
        <el-form-item prop="username">
          <el-input
            type="text"
            v-model="loginForm.username"
            autocomplete="off"
            prefix-icon="iconfont icon-yonghu"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input
            :type="flage ? 'text' : 'password'"
            v-model="loginForm.pwd"
            autocomplete="off"
            prefix-icon="iconfont icon-mima"
            @keyup.native.13="submitForm('ruleForm')"
          >
            <template v-slot:suffix>
              <i
                class="iconfont"
                :class="flage ? 'icon-eyes-' : 'icon-eyes'"
                @click="flage = !flage"
              ></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="login-btn"
            @click="submitForm('ruleForm')"
            :loading="isloading"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from "../api/user.js";
import local from "../utils/local.js";
import { createRoute } from "../router/index.js";
export default {
  data() {
    var validateUsername = (rule, value, callback) => {
      const user = /^([a-zA-Z0-9_-]|[\u4E00-\uFA29]){3,10}$/;
      if (value === "") {
        callback(new Error("请输入用户名"));
      } else if (!user.test(value)) {
        callback(
          new Error("请输入符合规则的用户名,3-10位中文、英文、下划线、数字")
        );
      } else {
        callback();
      }
    };
    var validatePwd = (rule, value, callback) => {
      const reg = /^([a-zA-Z0-9_-]){3,10}$/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (!reg.test(value)) {
        callback(
          new Error("请输入符合规则的密码,3-10位中文、英文、下划线、数字")
        );
      } else {
        callback();
      }
    };
    return {
      isloading: false,
      flage: false,
      loginForm: {
        username: "",
        pwd: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        pwd: [{ validator: validatePwd, trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.isloading = true;
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const data = await login({
            account: this.loginForm.username,
            password: this.loginForm.pwd,
          });
          if (data.code === 0) {
            setTimeout(() => {
              local.set("token", data.token);
              local.set("role", data.role);
              createRoute();
              this.$router.push("/");
            }, 2000);
          } else {
            this.isloading = false;
            this.$message({
              message: data.msg,
              type: "error",
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.login-box {
  height: 100%;
  background-color: #2d3a4b;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-inner {
  width: 350px;
  height: 200px;
  padding: 10px;
  h3 {
    font-size: 24px;
    font-weight: bold;
    padding: 5px;
    text-align: center;
    color: #fff;
    margin-bottom: 15px;
  }
  /deep/.el-form-item input {
    background-color: #2d3a4b;
    color: #fff;
  }
  .login-btn {
    width: 350px;
    font-size: 14px;
  }
}
</style>